<template>
  <div id="main" :data-circle-pie-cid="cid" class="chart" />
</template>

<script>
import { ChartMixin } from '../mixin'
export default {
  name: 'CirclePie',
  mixins: [ChartMixin],
  props: {
    data: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      newData: [],
      nameList: ['未完成', '已完成']
    }
  },
  watch: {
    data(newData, OldData) {
      console.log('watch', newData, OldData)
      this.setOptions(newData)
    }
  },
  methods: {
    setOptions(newData) {
      console.log('options', this.data)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          bottom: 100,
          right: 20,
          orient: 'vertical'
          // data: ['已完成', '未完成']
        },
        color: ['#36A2EB', '#EBEEF5'],
        series: [
          {
            name: '完成率',
            type: 'pie',
            color: ['rgb(212,212,212)', 'rgb(57,114,239)'],
            radius: '50%',
            selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: newData.map(v => {
              const t = {}
              t['name'] = this.nameList[v['name']]
              t['value'] = v['value']
              return t
            })
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
  .chart {
    margin: auto;
    width: 600px;
    height: 400px;
  }
</style>
